import {uShareMyDev} from '@/api/deviceShare'
import {FormInstance} from 'ant-design-vue'
import {PropType} from 'vue'
import {ChangeVisible} from '../modal'
import {CnMediumSpan, CnNormalSpan} from '../text'
const ShareDevModalForm = defineComponent({
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    shareDetail: {
      type: Object as PropType<DeviceShare.ShareDetail>,
      required: true
    }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      shareUserPhone: number | null
    }>({
      shareUserPhone: null
    })

    const shareNameList = computed(() =>
      props.shareDetail.shareUserPack.shareNameList.length
        ? props.shareDetail.shareUserPack.shareNameList.join(',')
        : '暂未分享过'
    )
    function handleConfirmClick() {
      if (!state.shareUserPhone) return
      uShareMyDev({
        devId: props.shareDetail.devId,
        shareUserPhone: state.shareUserPhone
      })
        .then(res => {
          emit('finish')
          props.changeVisible && props.changeVisible(false)
        })
        .catch(err => {})
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
    }

    return () => (
      <div class='relative'>
        <div class='px-24'>
          <div class='h-56 flex items-center'>
            <CnMediumSpan class='mr-24'>已分享给</CnMediumSpan>
            <CnNormalSpan class='flex-1'>{shareNameList.value}</CnNormalSpan>
          </div>
          <div class='h-56 flex items-center mb-38'>
            <CnMediumSpan class='mr-24'>分享成员</CnMediumSpan>
            <a-input
              allowClear
              class='w-207 h-32'
              placeholder='输入成员手机号'
              type='number'
              v-model={[state.shareUserPhone, 'value']}
            ></a-input>
          </div>
        </div>
        <div class='ant-modal-footer'>
          <a-button class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export default ShareDevModalForm
